import { useState, useEffect } from 'react'
import DarkCard from '../../../../../common/DarkCard'
import { Button, Select } from 'antd'
import SvgIcon from '../../../../../common/SvgIcon'
import './index.less';
export default function ModuleSelector(props) {
    const { items, value, onChange } = props
    return <div className="layout-v module-selector" style={{
        // width: 350,
        // height: 42,
        marginBottom: 10,
        // fontSize: 20,
        fontWeight: 'bold',
        position: 'absolute',
        left: 390,
        top: 80
    }}>
        {items.map((item, i) => {
            return <div className={`layout-v center ${value === (item.name || item) ? 'module-selected' : ''}`} key={i} style={{
                marginBottom: 8,
                fontSize: 12
            }} onClick={e => {
                onChange?.(item.name || item)
            }}>
                <Button style={{

                    marginBottom: 4
                }} className='btn-circle' size="large" shape="circle" icon={<SvgIcon style={{
                    fontSize: 20,
                    color: "#fff",
                }} type={`icon-${item.icon}`}></SvgIcon>}></Button>
                <div className='module-title'>{item.name || item}</div>
            </div>
        })}

        {/* <Select style={{
            width: "100%"
        }} value={value} options={items.map(item => {
            return {
                key: item,
                label: item,
                value: item
            }
        })} onChange={v => {
            onChange(v)
        }}></Select> */}
    </div>
}